让 AI 直接写进博客：从 CDP 到 WebMCP 的自动化写作工作流

过去，我们让 AI 写文章，通常只能得到一段 Markdown 文本。接下来还需要人工复制内容、整理格式、选择分类，再将文章保存到博客系统中。

而通过 Chrome DevTools Protocol（CDP）与 WebMCP，这个过程可以进一步自动化：用户只需要告诉 AI 想写什么，AI 就能连接浏览器、识别博客工具，并将文章直接写入指定位置。

AI 如何连接博客？

整个流程的基础，是让 Chrome 开启远程调试端口：

--remote-debugging-port=9222

启动后，AI 可以通过 localhost:9222 连接到 Chrome，并查看当前打开的页面。这个端口相当于 AI 与浏览器之间的通信入口。

需要注意的是，远程调试端口应当只在本机使用，避免将调试接口暴露到公网，否则可能带来浏览器控制和隐私泄露风险。

WebMCP：让网页提供可调用的工具

网页本身不仅是展示内容的页面，也可以向 AI 暴露一些明确的操作工具。例如博客页面可以注册以下工具：

• list_blog_categories：获取博客支持的文章分类；
• write_blog_post：将 Markdown 文章写入指定分类。

AI 通过页面提供的 navigator.modelContext 获取工具列表：

const tools = await navigator.modelContext.getTools()

找到目标工具后，再传入参数执行：

const tool = tools.find(
  item => item.name === "write_blog_post"
)

await navigator.modelContext.executeTool(
  tool,
  JSON.stringify({
    category: "03.随笔杂谈",
    title: "文章标题",
    content: "文章正文"
  })
)

这样，AI 就不再只是“生成文本”，而是拥有了执行具体网页操作的能力。

一次完整的自动写作流程

一个完整的工作流大致可以分为以下几个阶段。

首先，用户告诉 AI 想写的主题，例如：

帮我写一篇关于人工智能学习方法的文章。

随后，AI 检查 Chrome 是否已经开启远程调试，并连接到本地调试端口。

连接成功后，AI 定位博客页面，通过 getTools() 确认网页提供了哪些功能。接着，它调用分类查询工具，获取博客当前可用的分类名称。

在生成文章时，AI 还需要按照博客系统的要求添加 YAML frontmatter，例如：

---
title: 人工智能学习方法
date: 2026-06-07
categories:
  - 03.随笔杂谈
tags:
  - AI
  - 学习方法
---

最后，AI 调用 write_blog_post，将分类、标题和文章内容一起传给网页。博客系统负责自动编号、补全部分信息，并将 Markdown 文件写入对应目录。等待页面重新生成后，新文章就可以在博客中访问了。

自动化写作的关键细节

这套方案虽然流程清晰，但有几个细节非常重要。

第一，executeTool 接收的参数必须是 JSON 字符串，而不是普通 JavaScript 对象。因此需要使用：

JSON.stringify(data)

第二，文章内容必须包含正确的 frontmatter。缺少标题、日期或分类信息时，文章可能无法被博客系统识别，也不会出现在文章列表中。

第三，分类名称必须与博客工具返回的名称完全一致。分类名称中的编号、标点和空格都可能影响最终写入结果。

第四，浏览器需要支持 WebMCP，并且通常需要使用较新的 Chrome 版本，同时在浏览器实验性设置中开启 Model Context API。

从“内容生成”走向“任务执行”

AI 写作助手真正有价值的地方，并不只是生成一篇文章，而是能够参与完整的内容发布流程。

从选题、写作，到格式整理、分类选择，再到文件写入，AI 可以逐渐成为博客系统中的协作成员。网页通过 WebMCP 暴露出清晰、受控的能力，AI 则负责理解用户意图并组合这些能力。

这也代表着一种新的交互方式：用户不必学习复杂的后台操作，只需要用自然语言提出需求；网页也不必为每一种 AI 单独开发接口，只要提供标准化工具即可。

未来，博客、知识库、项目管理平台乃至各种办公系统，都可能通过类似方式与 AI 协作。届时，AI 将不再停留在聊天窗口里，而是能够真正进入我们的工作流程，帮助我们完成从想法到成果的最后一步。